<template>
    <view class="content">
        <view class="_title">
            签约成功
        </view>
        <view class="_scroll">
            <view class="_listfw">
                <view class="_top">
                    <view class="imgnoe">
                        <image class="imageBox" :src="thumbnail" mode=""></image>
                    </view>
                    <view class="_right">
                        <view class="_name">{{title}}</view>
                        <view class="_label">
                            <text style="color: #aaaaff;border: 1px solid #aaaaff;" v-if="parseInt(type)===1">精品公寓</text>
                            <text style="color: #aaaaff;border: 1px solid #aaaaff;" v-if="parseInt(type)===2">分散式合租</text>
                            <text style="color: #aaaaff;border: 1px solid #aaaaff;" v-if="parseInt(type)===3">分散式整租</text>
                            <text style="color: #ffcad0;border: 1px solid #ffcad0;">电子合同</text>
                        </view>
                        <view class="_price" style="color: #ffaa00;">
                            <text style="font-weight: 600;">{{rent_money}}</text>元/月
                        </view>
                    </view>
                </view>
            </view>
            <view class="information">
                <view class="dtla">租约信息</view>
                <view>
                    起止时间<text>{{detail.r_time_start}}-{{detail.r_time_end}}</text>
                </view>
                <view>
                    付款方式<text>{{detail.pay_type}}</text>
                </view>
                <view>
                    租期<text>{{detail.t_time_tag}} 个月</text>
                </view>
                <view>
                    房租<text>{{detail.rent_money}}元/月</text>
                </view>
                <view>
                    房屋押金<text>{{detail.cash_money}}元</text>
                </view>
                <view v-for="(item,index) in JSON.parse(detail.other_expenses)">
                    {{item.s_name}}<text>{{item.money}}元/月</text>
                </view>
                <view>
                    下期收租日<text>{{detail.next_period}}</text>
                </view>
                <view>
                    备注<text>无</text>
                </view>

                <view class="dtla">租客信息</view>
                <view>
                    姓名<text>{{detail.r_name}}</text>
                </view>
                <view>
                    性别<text>男</text>
                </view>
                <view>
                    手机号码<text>{{detail.tel}}</text>
                </view>

                <view class="dtla">房东信息</view>
                <view>
                    姓名<text>{{detail.realname}}</text>
                </view>
                <view>
                    手机号<text>{{detail.mobile}}</text>
                </view>

                <view class="dtla">订单信息</view>
                <view>
                    订单号<text>{{detail.order_sn}}</text>
                </view>
                <view>
                    创建时间<text>{{detail.add_time}}</text>
                </view>
            </view>
            <view class="safe-area-inset-bottom"></view>

            <view class="fixed">
                <view class="footer">
                    <view class="btn-item">
                        <u-button text="申请退房" shape="circle" plain type="primary" @click="goApply"></u-button>
                    </view>
                    <view class="btn-item">
                        <u-button text="查看合同" shape="circle" plain type="primary" @click="goConfirm"></u-button>
                    </view>
                    <view class="btn-item">
                        <u-button text="查看账单" shape="circle" plain type="primary" @click="goPayment"></u-button>
                    </view>

                    <view class="btn-item" @click="telHandler">
                        <u-button text="联系房东" shape="circle" color="linear-gradient(to right, rgb(249, 176, 25), rgb(255, 124, 58))"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                up_id:'',
                detail:{},
                item:{},
                title : '',
                type : '',
                rent_money :'',
                thumbnail: '',
            };
        },
        onLoad(option){
            this.up_id = option.up_id;
            this.title = option.title;
            this.type = option.type;
            this.rent_money = option.rent_money;
            this.thumbnail = option.thumbnail;
            let params = {
                u_id: uni.getStorageSync('u_id'),
                up_id: option.up_id,
            };
            this.getDetail(params);
        },
        methods:{
            goApply(){
                uni.navigateTo({url:'/pages/user/my/apply' + uni.$u.queryParams({id:this.up_id}) });
            },
            goConfirm(){
                uni.navigateTo({
                    url: '/pages/user/my/confirm' + uni.$u.queryParams({
                        id: this.up_id,
                        is_confirm: this.detail.confirm
                    })
                });
            },
            goPayment(){
                uni.navigateTo({
                    url: '/pages/user/my/payment' + uni.$u.queryParams({
                        id: this.up_id,
                        title: this.title,
                        rent_money: this.rent_money,
                    })
                });
            },
            telHandler(){
                uni.makePhoneCall({
                    phoneNumber: this.detail.mobile.toString()
                });
            },

            getDetail(params) {
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/contract_details' + uni.$u.queryParams(params),).then(res => {
                    uni.hideLoading();
                    this.detail = res;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 750rpx;
        background-color: #ff5500;

        ._title {
            padding-left: 20rpx;
            font-size: 14px;
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            color: white;
        }
        ._scroll {
            width: 100%;
            padding-left: 20rpx;
            padding-right: 20rpx;
            background-color: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            ._bottomyd{
                position: fixed;
                width: 750rpx;
                height: 120rpx;
                bottom: 0;
                left: 0;
                background-color: white;
                display: flex;
                justify-content: space-around;
                border-top: 2px solid #DCDFE6;
                box-sizing: border-box;
                .danfd{
                    color: #550000;
                    background-color: #ff5500;
                }
                view{
                    width: 20%;
                    height: 70rpx;
                    border: 1px solid #7f7f7f;
                    color: #7f7f7f;
                    border-radius: 15px;
                    text-align: center;
                    line-height: 70rpx;
                    margin-top: 20rpx;
                }
            }
            .information {
                width: 710rpx;
                padding-bottom: 150rpx;
                .dtla{
                    color: black;
                    margin-top: 30rpx;
                }
                view {
                    font-size: 12px;
                    color: #b0b0b0;
                    margin-top: 10rpx;
                }

                text {
                    color: black;
                    float: right;
                }
            }

            ._listfw {
                width: 100%;
                height: 220rpx;
                // margin-bottom: 20rpx;
                background-color: white;

                ._top {
                    width: 100%;
                    height: 220rpx;
                    // background-color: green;
                    border-bottom: 1px solid #ececec;
                    padding-top: 20rpx;

                    ._right {
                        width: 450rpx;
                        height: 180rpx;
                        // background-color: red;
                        display: inline-block;
                        margin-left: 20rpx;
                        overflow: hidden;

                        ._label {
                            width: 100%;
                            margin-bottom: 4rpx;

                            text {
                                display: inline-block;
                                margin-right: 10rpx;
                                padding-left: 6rpx;
                                padding-right: 6rpx;
                                border-radius: 3px;
                            }
                        }

                        ._position {
                            font-size: 12px;
                            color: #C0C0C0;
                            margin-bottom: 4rpx;
                        }

                        ._name {
                            font-size: 12px;
                            font-weight: 600;
                            margin-bottom: 4rpx;
                        }
                    }

                    .imgnoe {
                        display: inline-block;
                        width: 240rpx;
                        height: 160rpx;
                        border-radius: 15rpx;
                        overflow: hidden;

                        image {
                            width: 240rpx;
                            height: 160rpx;
                        }
                    }
                }
            }
        }
    }

    .fixed{
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1rpx solid #c0c4cc;
    }
    .footer{
        display: flex;
        flex-direction: row;
        padding-top: 20rpx;
        /*padding: 20rpx 20rpx 20rpx 20rpx;*/
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        box-sizing: border-box;
    }

    .btn-item {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        float: left;
        margin-right: 40rpx;
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
</style>
